<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../00_static/js/vue.js" type="text/javascript"></script>
    <title>数据代理</title>
</head>

<body>
    <!-- 
        关于Vue中的数据代理：
            1.什么是数据代理
                1）配置对象data中的数据，会被收集到vm._data中，然后通过 object.defineProperty让vm上拥有data中所有的值
                2）当访问vm的msg时，返回的是data当中同名属性的值
                3）当修改vm的msg时，修改的时data当中同名属性的值
            2.为什么要数据代理
                为了更加方便的读取和修改data中的数据，不做数据代理，就要 vm._data.xxx 访问数据
            3.扩展思考 - 为什么要先收集在_data中，然后再代理出去呢
                更高效的监视数据（直接收集到vm上会导致监视效率太低）
     -->

    <div id="app">
        {{ msg }}
    </div>

    <script type="text/javascript">
        // 模拟数据代理
        let _data = { msg: '123' }
        let vm = {}

        Object.defineProperty(vm, 'msg', {
            set(value) {
                _data.msg = value
            },
            get() {
                return _data.msg
            }
        })

        console.log(vm)
    </script>
</body>

</html>